<template>
  <div id="box">
    <div class="box-header">
      <div class="header-title">
        <table>
          <tr>
            <td>
              <img src="../assets/imgs/travel.png" alt="">
            </td>
            <td>基于Echarts的贵州5A级旅游景区分析与可视化研究</td>
          </tr>
        </table>
      </div>
      <div class="header-right">
        <div
            :style="back1"
            @click="backShow(1)">
            <router-link :to="{path: '/index/map'}">
              <table>
                <tr>
                  <td>
                      地图检索
                  </td>
                </tr>
              </table>
            </router-link>
        </div>
        <div
            :style="back2"
            @click="backShow(2)">
            <router-link :to="{path: '/index/one'}">
              <table>
                <tr>
                  <td>
                      可视化大屏
                  </td>
                </tr>
              </table>
            </router-link>
        </div>

      </div>
    </div>
    <div class="box-subject">
        <!-- 路由 -->
          <router-view></router-view>
    </div>

  </div>
</template>

<!--js-->
<script>

  export default {
    name: 'SeismIndex',
    data(){
      return{ //获取用户信息到主页
        sname: sessionStorage.getItem('name'),
        smail: sessionStorage.getItem('mail'),
        stel: sessionStorage.getItem('tel'),
        isAuth: "",//是否保持登录状态
        back1: '',
        back2: 'background-color: rgb(0, 129, 64);font-weight: bold;',
        back3: '',
        back4: ''
      };
    },
    methods:{
      //当点击退出按钮，将不保存登录状态
      logout() {
        this.isAuth = "false";//修改登录状态
        sessionStorage.setItem('s', this.isAuth);
        this.$router.replace('/login');//页面跳转至登录页面
      },
      backShow(id) {
        if(id === 1) {
          this.back1 = 'background-color: rgb(0, 129, 64);font-weight: bold;';
          this.back2 = '';
          this.back3 = '';
          this.back4 = '';
        }else if(id === 2) {
          this.back1 = '';
          this.back2 = 'background-color: rgb(0, 129, 64);font-weight: bold;';
          this.back3 = '';
          this.back4 = '';
        }else if(id === 3){
          this.back1 = '';
          this.back2 = '';
          this.back3 = 'background-color: rgb(0, 129, 64);font-weight: bold;';
          this.back4 = '';
        }else {
          this.back1 = '';
          this.back2 = '';
          this.back3 = '';
          this.back4 = 'background-color: rgb(0, 129, 64);font-weight: bold;';
        }
      }
    },
  };

</script>
<!--css-->
<style scoped>
@import "../assets/css/SeismIndex.css";
</style>